<template>
  <el-form v-loading="loading" ref="pram" :model="pram" :rules="rules" label-width="100px" @submit.native.prevent>
    <el-form-item label="图片：" prop="url">
      <el-upload
          class="avatar-uploader"
          action
          :show-file-list="false"
          :http-request="handleUploadForm1"
          :headers="myHeaders"
          :before-upload="onBeforeUpload">
        <img v-if="pram.url" :src="imageUrl + pram.url" class="image" alt="">
        <i v-else class="el-icon-plus avatar-uploader-image"></i>
      </el-upload>
    </el-form-item>
    <el-form-item label="排序" prop="sort">
      <el-input-number step="1" min="0" max="999" v-model="pram.sort" maxlength="150" placeholder="数字越大越优先"/>
    </el-form-item>
    <el-form-item label="状态" prop="status">
      <el-switch v-model="pram.status" :active-value="false" :inactive-value="true"></el-switch>
    </el-form-item>
    <!-- 按钮放到右下角 -->
    <div style="text-align: center; margin-top: 20px;">
      <el-form-item>
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handlerSubmit()">保存</el-button>
      </el-form-item>
    </div>
  </el-form>
</template>

<script>
import {getToken} from "@/utils/auth";
import {upload} from "@/api/upload";
import {save} from "@/api/banner";

export default {
  props: {
    view: {
      type: Boolean,
      default: true
    },
    isCreate: {
      type: Number,
      required: true
    },
    editData: {
      type: Object,
      default: () => {
        return {rules: []}
      }
    },
  },
  data() {
    return {
      filterData: {
        userType: '',
        seat: ''
      },
      remark: '',
      audit: null,
      treeOption: [],
      loading: false,
      pram: {
        url: '',
        sort: '',
        id: null,
        status: 0
      },
      rules: {
        url: [{required: true, message: '请上传图片', trigger: ['blur', 'change']}],
      },
      myHeaders: {"token": getToken()},
      imageUrl: ''
    }
  },
  mounted() {
    this.imageUrl = process.env.VUE_APP_IMAGE_URL
    this.beforeUpload()
  },
  methods: {
    beforeUpload(file) {
      if (file.size / 1024 / 1024 > 10) {
        this.$message.error('上传的文件超出大小');
        return false;
      }
    },
    async handleUploadForm1(param) {
      const formData = new FormData();
      formData.append("file", param.file);
      let loading = this.$loading({
        lock: true,
        text: "上传中，请稍候...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      try {
        const res = await upload(formData);
        this.pram.url = res.url;
        loading.close();
        this.$message.success("上传成功");
      } catch (error) {
        loading.close();
      }
    },
    onBeforeUpload(file) {
      const isIMAGE = ['image/jpg', 'image/jpeg', 'image/gif', 'image/png'].includes(file.type);
      const isLt10M = file.size / 1024 / 1024 < 10;

      if (!isIMAGE) {
        this.$message.error('上传流程图只能是jpg、png或gif格式!');
      }
      if (!isLt10M) {
        this.$message.error('上传流程图大小不能超过 10MB!');
      }
      return isIMAGE && isLt10M;
    },
    handlerSubmit() {
      if (this.saveLoading || this.formLoading) {
        return;
      }
      this.$refs.pram.validate(valid => {
        if (!valid) return;
        this.saveLoading = true;
        save(this.pram).then(() => {
          this.$message.success('保存成功');
          this.close();
        }).finally(() => {
          this.saveLoading = false
        })
      })
    },
    close() {
      this.$emit('hideEditDialog')
    },

  }
}
</script>
<style scoped lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-image {
  font-size: 28px;
  color: #8c939d;
  width: 300px;
  height: 300px;
  line-height: 300px;
  text-align: center;
}

.image {
  width: 300px;
  height: 300px;
  display: block;
}

</style>
